Design + Code Workflows

Workflows

  1. Unicorn workflow Unicorn workflow[1] depends on availability of person who knows both UX design and code - UX unicorn.

  2. Blame the Developers (aka Over the wall) Designers and developers live in different islands, and communicate with boatlods of documentation. Genius designers do ready pixel-specs, freeze it into documentation, and blame the developers for not realizing their vision. This can be made work though, if the business context is stable and known, there are no big unknown, existing code is stable and workable, and the core concepts and interactions are well defined.

If there is an unbreakable silo between design and development, this is the way to go! A good example of this is a design system - community of designers crystallizing their knowledge into document, for those that come after them.

  1. Small waterfalls This is the island approach, but with quick iterations, less specs, reviews and frequent feedback. But the overall flow is still from concept to broken down user stories, to detailed design to code.

  2. Ping-Pong You don't need to work in different swimlanes. The discussion and discovery goes both ways. See the video by Brad frost for a good example [2]. The design is finalized in the browser. Without a good developer the Web layout is designed and implemennted using concepts of the past - tiles and rows - showing of how web used to work. [3].

4.1 Dan Mall call this Hot Potato workflow [4] [5]

  1. Walking skeleton Building a walking skeleton[6] of functionality first - then adding meat to the bones and flowing information both ways. This is a good way to in case you have a good UX engineer, or there will be some technical restrictions you are not yet aware of.

  2. Shared workshop Create a common workshop and a workbench for working together on shared things. Tools like Storybook let designers and developers work better together. It allows designers to see all the states of the component, and even participate in coding wihtout needing to understand all the context and code complexity. [7]

  3. Road trip

You can sketch with technology, to use it for communication.

Books

  1. Designer developer workflows ↩︎

  2. designer + developer workflow - by Brad Frost ↩︎

  3. Developer & Designer collaboration ↩︎

  4. Hot potato workflow ↩︎

  5. Designer + Developer Collaboration Workshop ↩︎

  6. Kickstart Your Next Project with a Walking Skeleton ↩︎

  7. The workshop and the storefront ↩︎

Backlinks

No related notes